<template>
  <view class="page-container">
    <swiper
        class="swiper-container"
        :current="currentIndex"
        @change="onSwiperChange"
    >
      <block v-for="(item, index) in allQuestions" :key="index">
<!--        && index>currentIndex-5-->
        <swiper-item
            v-show="index<=currentIndex+5 && index>=currentIndex-5"
            class="swiper-item"
        >
          {{currentIndex+5}}、{{index}}、{{currentIndex-5}}
          <view class="question-container">
            <view class="question-title"><text>{{index+1}}、</text>{{ item.question }}</view>
            <view v-for="(value, label, index) in item.options" :key="index" class="question-option">
              <view class="option-title">
                {{label}}、{{value}}、{{index}}
              </view>
            </view>
          </view>
        </swiper-item>
      </block>

    </swiper>
  </view>
</template>
<script setup>
import { ref,computed} from 'vue'
import {onLoad} from "@dcloudio/uni-app"
import utils from '@/utils/utils.js'
import  {subject} from '@/api'
import useUserStore from '@/store/user.js'
const useStore = useUserStore()
const isotype = ref('')//1:随机练习
const categoryId = ref('')//分类id
const  count = ref(0) //当前题目数量
onLoad((options) => {
  console.log(options)
  if (options && options.type) {
     isotype.value = options.type
  }
  if (options && options.categoryId) {
    categoryId.value = options.categoryId
    getQuestions()
  }
})

// 假设这是你的题目数据
const allQuestions = ref([
  {
    title: '这是第一道题',
    options: [
      { value: 'A', label: '选项A' },
      { value: 'B', label: '选项B' },
      { value: 'C', label: '选项C' },
      { value: 'D', label: '选项D' }
    ],
    down: ''
  },
  {
    title: '这是第一道题',
    options: [
      { value: 'A', label: '选项A' },
      { value: 'B', label: '选项B' },
      { value: 'C', label: '选项C' },
      { value: 'D', label: '选项D' }
    ],
    down: ''
  },
  {
    title: '这是第一道题',
    options: [
      { value: 'A', label: '选项A' },
      { value: 'B', label: '选项B' },
      { value: 'C', label: '选项C' },
      { value: 'D', label: '选项D' }
    ],
    down: ''
  },
  {
    title: '这是第一道题',
    options: [
      { value: 'A', label: '选项A' },
      { value: 'B', label: '选项B' },
      { value: 'C', label: '选项C' },
      { value: 'D', label: '选项D' }
    ],
    down: ''
  },
  // 更多题目...
])

// 显示的题目列表，这里可以根据实际情况调整每次显示的题目数量
const displayedQuestions = computed(() => {
  // 这里仅作为示例，假设我们每次显示3道题目
  const startIndex = Math.max(0, currentIndex.value - 1);
  const endIndex = Math.min(allQuestions.value.length, currentIndex.value + 2);
  return allQuestions.value.slice(startIndex, endIndex);
})
// 当前显示的题目索引
const currentIndex = ref(0)

// 更改swiper当前项的回调
function onSwiperChange(e) {
  console.log('当前索引', e.detail.current)
  currentIndex.value = e.detail.current
}

// 单选题选项选择的回调
function onRadioChange(question, event) {
  question.down = event.detail.value
}
//获取当前题目
const getQuestions = async () => {
   const res = await  subject.getSubject({uid: useStore.uid,cateid:categoryId.value })
  console.log(res)
  if (res.code === 0) {
    allQuestions.value = res.data.question_list || []
    allQuestions.value.forEach(item => {
      item.down = ''
    })
    console.log('题目列表', allQuestions.value)
  }
}
</script>
<style scoped lang="scss">

</style>